<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="添加费用"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <page-form :model="form" div="true" class="page-form" ref="formRef" layout="vertical">
      <page-form-row>
        <page-form-item label="借调附加费" size="1/2">
          <i-input-number v-model="form.amount" placeholder="请输入" :min="0" :max="99999999.99" :precision="2" />
        </page-form-item>

        <page-form-item label="收支类型" size="1/2">
          <a-select v-model="form.costType" :options="dict.costTypeEnum" :allow-clear="false" />
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { addFee } from '@/api/asset/carTransfer'
  import { usePageDict } from '@/hooks/useDict'

  const form = ref({ costType: 0 })
  const showModal = ref(false)
  const dict = usePageDict('carTransferDict')
  const emits = defineEmits(['ok'])

  const show = (e) => {
    showModal.value = true
    form.value.id = e.id
  }

  const onClose = () => {
    showModal.value = false
    form.value = {
      costType: 0,
    }
  }

  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const onConfirm = () => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          addFee({ ...form.value })
            .then((res) => {
              console.log(res)
              Message.success(res.message)
              emits('ok')
              onClose()
              resolve()
            })
            .catch((err) => {
              console.log(err)
              // Message.error(err.message)
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .typeName {
    margin-bottom: 20px;
  }
  .typeNameLabel {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
    line-height: 22px;
    text-align: left;
  }
  .typeNameValue {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
  }
  .typeNameLabel2 {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
  }
  .feeItem {
    min-height: 46px;
    margin-top: 16px;
    background: rgba(247, 248, 250, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
  }
  .descC {
    margin-top: 4px;
    color: rgb(140, 147, 155);
  }
</style>
